<template>
    <div class="login-box">
        <div class="img-box">
            <img class="logo" src="../../assets/exercise.png">
        </div>

        <div class="login-container">

            <h1 class="title">健身管理系统</h1>
            <el-input v-model="username" class="username" placeholder="请输入用户名称" />
            <el-input
                v-model="password"
                type="password"
                placeholder="请输入密码"
                class="username"
                show-password
            />
            <div class="check-box">
                <el-input v-model="checkinfo" class="username" placeholder="请输入验证码" />
                <span class="check-number">ABC123</span>
            </div>

            <button @click="UserLogin" class="loginIn">立即登陆</button>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref} from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default defineComponent({
    setup () {
        const username = ref('')
        const password=ref('')
        const checkinfo=ref('')
        const store = useStore()
        const router = useRouter()

        //点击登录
        function UserLogin(){
            console.log(username.value,password.value,checkinfo.value);
            let AccountInfo = store.state.home.AccountInfo
            if(username.value == AccountInfo.name && password.value == AccountInfo.pwd){
                if(checkinfo.value == 'ABC123'){
                    router.replace({
                        name:'home'
                    })
                }else{
                    alert('验证码不正确')
                }
            }else{
                alert('请输入正确的账号或密码')
            }
        }

        return{
            username,
            password,
            checkinfo,
            UserLogin
        }

    }
})
</script>

<style scoped>
    .login-box{
        width: 100%;
        height:780px;
        background: url("../../assets/bg-img8.webp");
        background-size:cover ;
        padding: 1px;
    }
    .login-container{
        width:400px;
        height:400px;
        margin: auto;
        border: 0.1px solid rgb(187, 184, 184);
        background-color: rgba(182, 193, 201, 0.527);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding-left:20px;
        padding-right:20px;
        
    }
    /* 登录按钮 */
    .loginIn {
      width: 400px;
      margin: 0 auto;
      border: none;
      padding: 3px 5px;
      line-height: 34px;
      border-radius: 5px;
      background-color: rgb(61, 170, 233);
      color: white;
      font-size:16px;
    }
    /* 输入账户 */
    .username{
        height:40px;
        margin-bottom: 20px;
        font-size:14px;
    }
    .title {
        margin-bottom: 40px;
        margin-top:40px;
        text-align: center;
        color:white;
        
    }
    .check-box{
        position: relative;
    }
    .check-number{
        position: absolute;
        top:2px;
        left:322px;
        border:0.1px solid rgb(207, 206, 206);
        padding:7px;
        color:gray;
        border-radius:3px;
    }
    /* 图标盒子 */
    .img-box{
        border-radius:120px;
        height:120px;
        width:120px;
        padding:15px;
        background-color: rgba(249, 245, 245, 0.8);
        /* border:1px solid red; */
        margin:50px auto;
    }
    /* 图标 */
    .logo{
        height:120px;
        width:120px;
        margin:auto;   
    }
</style>
 